<template>
  <div class="App">
    <!-- 1.父传子-给子组件添加属性的方式传值 -->
     <!-- 2.子传父-对消息进行监听 changeData 是子组件通知的方法名-->
    <SonComponent v-bind:dks="sonData" v-on:changeData="changeFn"></SonComponent>
  </div>
</template>

<script>
// 组件间通信
import SonComponent from "./components/SonComponent.vue";

export default {
  components: {
    SonComponent,
  },
  data() {
    return {
      sonData: 100,
    };
  },
  methods: {
    // 3. 子传父-提供处理函数，提供逻辑
    changeFn(newVal) {
      console.log("修改传值", newVal)
      this.sonData = newVal;
    },
  },
};
</script>

<style scoped>
.App {
  width: 500px;
  height: 500px;
  border: 1px black;
}
</style>